<template>
  <div id="order">
    <div class="bgc">
      <van-row>
        <van-col span="24">
          <van-nav-bar title="填写订单" left-arrow @click-left="onClickLeft" />
        </van-col>
        <van-col span="24" v-if="!getMyRess">
          <van-contact-card type="add" @click="onGoRess" />
        </van-col>
        <van-col span="24" v-else>
          <van-contact-card type="edit" :name="checkedAddress.name" :tel="checkedAddress.tel" @click="onGoRess" />
        </van-col>
        <!-- 使用优惠券 -->
        <van-col span="24">
          <van-cell title="使用优惠券" is-link :value="'￥' + couponPrice + '元'" @click="showPopup" class="cell-list" />
          <van-popup v-model="show" position="bottom" round :style="{ height: '70%' }" class="centenr">
            <van-col span="24">
              <van-nav-bar title="优惠券" />
            </van-col>
            <van-col span="24" class="search">
              <van-cell-group>
                <van-field center clearable placeholder="请输入短信验证码">
                  <template #button>
                    <van-button size="small" type="primary">兑换</van-button>
                  </template>
                </van-field>
              </van-cell-group>
            </van-col>
            <!-- 切换不同 规格 -->
            <van-col span="24">
              <van-tabs @change="onTabIndex" animated>
                <van-tab :title="tab" v-for="(tab, index) in tabList" :key="index" :name="index">
                  <van-col span="24" class="tabcentenr">
                    <Coupon :CouponList="CouponList" @materials="onMaterials" />
                  </van-col>
                </van-tab>
              </van-tabs>
            </van-col>
          </van-popup>
        </van-col>
        <!-- 商品合计 -->
        <van-col span="24">
          <van-cell title="商品合计" :value="'￥' + goodsTotalPrice + '元'" />
          <van-cell title="运费" :value="'￥' + freightPrice + '元'" />
          <van-cell title="优惠券" :value="'￥' + couponPrice + '元'" />
        </van-col>
        <!-- 留言需要 -->
        <van-col span="24">
          <van-field v-model="message" rows="2" autosize label="留言" type="textarea" maxlength="50" placeholder="请输入留言" show-word-limit />
        </van-col>
        <!-- 商品信息 -->
        <van-col span="24" class="cell-list">
          <van-col span="24" class="centenr-box2 ">
            <van-row style=" border-bottom: 1px solid rgba(0, 0, 0, 0.1);" v-for="(item, index) in GoodsList" :key="index">
              <van-col span="6">
                <van-col span="24">
                  <img :src="item.picUrl" alt="" />
                </van-col>
              </van-col>
              <van-col span="18" class="centenr-box2-p">
                <p class="van-ellipsis">
                  {{ item.goodsName }}<span style="float: right;">×{{ item.number }}</span>
                </p>
                <p>
                  <span>{{ item.specifications.join('—') }}</span>
                </p>
                <p>￥{{ item.price }}</p>
              </van-col>
            </van-row>
          </van-col>
        </van-col>
      </van-row>
      <van-col span="24" class="buttom">
        <van-col span="16" class="letf">实付￥{{ cartPrice }}</van-col>
        <van-col span="8" class="right" @click="submit">去付款</van-col>
      </van-col>
    </div>
  </div>
</template>
<script>
import { Dialog } from 'vant'
import { Toast } from 'vant'
import Coupon from '@/components/coupon/coupon.vue'
import GoodsBlock from '@/components/user/goodsBlock.vue'
export default {
  name,
  data() {
    return {
      show: false,
      CouponList: {},
      tabList: ['可用', '不可用'],
      getGoodsDetail: '',
      message: '',
      couponPrice: '', //优惠券价格
      // 获取商品详情
      GoodsList: '',
      // 保存优惠券的id
      CouponID: '',
      cartId: '', //购物车Id
      goodsTotalPrice: '', //商品合计
      freightPrice: '', //运费
      cartPrice: '', // 商品 价格
      // 点击获取 个人的地址
      UserCouponList: '',
      checkedAddress: '', //用户优惠券id
      orderId: '', //保存订单ID
      CouponItem: '' //优惠券数据
    }
  },
  components: {
    Coupon,
    GoodsBlock
  },
  mounted() {
    this.onGetGoodsList() //获取当前页面信息
    this.onGetCouponList() //查看 可用优惠券
    // console.log(this.$store.state.Ress)
    // this.getMyRess = this.$store.state.Ress
    // console.log(this.$store.state.Ress)
    console.log(this.$route.query)
    this.onGetUserCouponList()
  },
  computed: {
    getMyRess() {
      return this.$store.state.Ress
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    submit() {
      let data = {
        cartId: this.cartId, //购物车id（从购物车下单时为0，立即下单时用cart/fastadd接口返回的购物车Id）
        addressId: this.getMyRess.id, //收货地址id
        couponId: 0, //0或-1：不使用，传优惠券id表示使用优惠券
        userCouponId: 0, //0或-1：不使用，传个人优惠券id表示使用优惠券
        message: this.message, //备注
        grouponRulesId: 0, //传0
        grouponLinkId: 0 //传0
      }
      console.log(data)
      // 提交之后干的事情
      this.$post('order/submit', data).then(result => {
        this.orderId = result.data.data.orderId
        Toast.loading({
          message: '加载中...',
          forbidClick: true
        })
        setTimeout(() => {
          if (result.data.errno == 0) {
            // 判断是否支付成功
            Dialog.confirm({
              title: '提示',
              message: '订单提交成功，是否去支付？'
            })
              .then(() => {
                // on confirm
                let data = {
                  PassOrderStatus: true,
                  PassOrderId: this.orderId
                }
                this.$router.push({ path: '/payment', query: data })
                // this.$store.commit('PassOrderStatus', true)
                // this.$store.commit('PassOrderId', this.orderId)
              })
              .catch(() => {
                // on cancel
                this.$router.push('/payment')
              })
          } else {
            Toast.fail('支付失败')
          }
        }, 2000)
      })
    },
    onGoRess() {
      let flg = {
        Status: true
      }
      this.$router.push({ path: '/ress', query: flg })
    },
    // 子组件传回来 数据
    onMaterials(item) {
      console.log(123)
      this.CouponID = item.cid
      this.CouponItem = item
      this.show = false
      this.CouponPrice = item.discount
      this.onGetGoodsList()
    },
    showPopup() {
      this.show = true
    },
    onTabIndex(name) {},
    // 获取商品信息   // 购物车点击下单或者立即下单的信息确认
    onGetGoodsList() {
      let data = {
        cartId: this.$route.query.data,
        addressId: this.getMyRess.id, //首次确认传0，修改地址后传地址id
        couponId: this.CouponID, //首次确认传0，修改优惠券后传优惠券id，传-1：不使用优惠券
        userCouponId: 0 //首次确认传0，修改优惠券后传用户优惠券id
      }
      console.log(data)
      this.$get('cart/checkout', data).then(result => {
        console.log(result)
        this.GoodsList = result.data.data.checkedGoodsList
        this.cartId = result.data.data.cartId
        this.cartPrice = result.data.data.orderTotalPrice
        this.freightPrice = result.data.data.freightPrice
        this.couponPrice = result.data.data.couponPrice
        this.goodsTotalPrice = result.data.data.goodsTotalPrice
        this.UserCouponList = result.data.data.userCouponId
        this.checkedAddress = result.data.data.checkedAddress
      })
    },
    //当前订单可用优惠券
    onGetCouponList() {
      let data = {
        cartId: this.cartId, //当前订单购物车id（从购物车下单时为0，立即下单时用cart/fastadd接口返回的购物车Id）
        grouponRulesId: 0 //团购券id，传0
      }
      console.log(data)
      this.$get('coupon/selectlist', data).then(result => {
        console.log(result)
        this.CouponList = result.data.data.list
      })
    },
    // 获取用户的优惠券
    onGetUserCouponList() {
      let data = {
        status: 0 //优惠券状态，0：正常可用；1：已使用; 2：已过期；3：已下架
      }
      this.$get('coupon/mylist', data).then(result => {
        console.log(result)
        this.UserCouponList = result.data.data.list
      })
    }
  }
}
</script>
<style lang="less" scoped>
.search {
  margin: 0.1rem 0px;
}
.tabcentenr {
  background-color: #f2f3f3;
  height: 4.25rem;
  margin-bottom: 2rem;
}
.cell-list {
  margin: 0.15rem 0px;
}
.centenr-box2 {
  .van-row:last-child {
    margin-bottom: 0.5rem;
  }
  .van-row {
    background-color: #fff;
    height: 1rem;
    position: relative;
    .van-checkbox-group {
      .checkbox {
        padding-top: 0.4rem;
        text-align: center;
        line-height: 104px;
      }
    }
    .centenr-box2-p {
      padding: 0.5rem;
      p {
        margin: 0;
      }
      p:nth-child(1) {
        font-size: 0.14rem;
      }
      p:nth-child(2) {
        font-size: 0.12rem;
        opacity: 0.7;
        margin: 5px 0px 10px 0px;
      }
      p:nth-child(3) {
        font-size: 0.16rem;
        color: chocolate;
      }
      .theme {
        position: absolute;
        right: 0.15rem;
        top: 0.6rem;
      }
    }
    .van-col {
      padding: 0.1rem;
      .van-col {
        background-color: rgb(247, 245, 245);
        img {
          width: 100%;
        }
      }
    }
  }
}
.goods {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  .van-card__title {
    font-size: 0.15rem;
    margin: 0.05rem 0rem;
  }
}

.delete-button {
  height: 100%;
}
.van-submit-bar {
  margin-bottom: 0.5rem !important;
}
.buttom {
  width: 100%;
  height: 0.6rem;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  position: fixed;
  .right {
    background-color: red;
    float: right;
    text-align: center;
    line-height: 0.6rem;
    color: #fff;
  }
  .letf {
    float: left;
    padding-left: 0.2rem;
    line-height: 0.6rem;
    color: chocolate;
    font-size: 0.2rem;
  }
}
</style>
